$(function () {
    var message = "《原神》是一款由中国上海米哈游网络技术有限公司制作发行的开放世界冒险游戏，于2020年9月28日在中国大陆地区上线，并在后续登录其他平台和国家及地区。\n" +
        "\n" +
        "游戏的世界观是一个名为提瓦特的神秘大陆，玩家扮演一位名叫旅行者的角色，在探索世界的过程中与各种NPC进行交互、接受任务并解决各种谜题，同时通过战斗来提升自己的实力，最终揭示世界的真相。\n" +
        "\n" +
        "游戏中拥有多种角色供玩家选择，每个角色都有其独特的技能和属性。玩家可以通过挑战不同难度的敌人、完成任务和活动等方式获得经验和素材，用来升级角色和装备。此外，《原神》还有丰富的剧情故事和背景设定，以及精美的画面和音效设计，使得游戏具有极高的可玩性和观赏性。\n" +
        "\n" +
        "总体来说，《原神》是一款融合了冒险、角色扮演、解谜等多种元素的游戏，无论是对于喜欢冒险类型游戏的玩家还是对二次元文化感兴趣的玩家，都有着很高的吸引力。";
    var chatContent2 = $("#chatContent");
    let text = {txt: "" + message + ""};
    let newMessage = document.createElement("p");
    newMessage.className = "robot";
    newMessage.innerText = message;
    chatContent2[0].appendChild(newMessage);
    // 设置元素宽度为字体长度
    console.log("字体宽度：")
    //背景宽度
    let backlen = newMessage.parentElement.scrollWidth;
    let len = 24 * message.length > backlen ? backlen : 24 * message.length
    newMessage.style.width = len + "px";
    let mag = len / backlen * 100;
    mag = parseInt(100) - parseFloat(mag);
    newMessage.style.marginLeft = mag + "%";
    //跳转到chatContent窗口最底部
    chatContent2.scrollTop(chatContent2[0].scrollHeight);
    /*$('#btn').click(function () {
        console.log($('#message').val());
        $('#message').before("<div class=\"robot\"><input type=\"text\" value=\"机器人回复的内容\"></div>")
     /!*   console.log(localStorage.getItem(username));
        let username = localStorage.getItem(username);
        let message = $('#message').val();
        chat(message,username);*!/
    })*/
    // 检测是否按下回车
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            // 回车键事件
            sendMessage();
            // 阻止默认事件
            event.preventDefault();
            // 触发按钮的点击事件
            $('#btn').click();
        }
    });
});

// 初始化
function initMessage(username, token) {
    let url =HTTPURL+ "/initMessage";
    console.log(url)
    $.ajax({
        url: url, // 请求的URL
        method: 'Post', // 请求方法（GET、POST等）
        dataType: 'json', // 期望的响应数据类型（json、html等）
        data: { // 请求参数
            username: username,
            token: token
        },
        success: function (response) { // 请求成功时的回调函数

            console.log(response)
            // 自己的消息
            console.log("自己的消息：")
            console.log(JSON.parse(response))
            JSON.parse(response).forEach(function (item) {
                // 得到item中|| 的下标
                let index = item.indexOf("||");
                console.log(index)
                let message = item.substring(index + 2, item.length);
                // 代码转换
                message = converDM(message);
                let getmessageUser = item.substring(0, index);
                // 自己接收的消息排列在左
                let chatContent2 = $("#chatContent");
                if (getmessageUser == username ){

                    let newMessage = document.createElement("p");
                    newMessage.className = "robot";
                    newMessage.innerText = message;
                    chatContent2[0].appendChild(newMessage);
                    // 设置元素宽度为字体长度
                    console.log("字体宽度：")
                    //背景宽度
                    const chatDiv = document.getElementById("chatContent");
                    console.log("背景宽度2："+chatDiv.offsetWidth)
                    if (parseInt((24*message.length)) > parseInt(chatDiv.offsetWidth)){
                        // 字体过多宽度大于背景最大宽度为背景
                        console.log("字体过多宽度大于背景"+message.length)
                        len = parseInt(chatDiv.offsetWidth)-parseInt(10);
                    }else{
                        console.log("机器人背景宽度："+message.length)
                        len = parseInt(24)*parseInt(message.length);
                        console.log(len)
                    }
                    newMessage.style.width = len +"px";
                    newMessage.style.marginLeft =0+"%";
                    //跳转到chatContent窗口最底部
                }else{
                     // 创建一个p元素
                        let newMessage = document.createElement("p");
                        newMessage.className = "my";
                        newMessage.innerText = message;
                        chatContent2[0].appendChild(newMessage);
                        // 设置元素宽度为字体长度
                        console.log("字体宽度：")
                        //背景宽度
                        const chatDiv = document.getElementById("chatContent");
                        console.log("背景宽度2："+chatDiv.offsetWidth)
                        console.log(message.length)
                        if ((24*message.length) > chatDiv.offsetWidth){
                            // 字体过多宽度大于背景最大宽度为背景
                            console.log("字体过多宽度大于背景")
                            len = chatDiv.offsetWidth;
                        }else{

                            console.log("自己背景宽度："+message.length)
                            len = parseInt(24)*parseInt(message.length);
                            console.log(len)
                        }
                        newMessage.style.width = len +"px";
                        console.log("1t"+len)
                        let mag = 0;
                        console.log(len)
                        console.log(chatDiv.offsetWidth)
                        console.log((parseInt(chatDiv.offsetWidth)/parseInt(len))*parseInt(100))
                        // 如果是最宽那么表示文字不移动否则向右移动
                        if(len == chatDiv.offsetWidth){
                            console.log("进入条件偏移量为0")
                            mag = 0;
                        }else {
                            console.log((len == chatDiv.offsetWidth)+"没有进入条件偏移量："+(parseInt(chatDiv.offsetWidth)/parseInt(len))*parseInt(100))
                            mag = (parseInt(chatDiv.offsetWidth)/parseInt(len))*parseInt(100)
                        }
                        newMessage.style.marginLeft = "auto";
                        //跳转到chatContent窗口最底部
                }

                chatContent2.scrollTop(chatContent2[0].scrollHeight);
            });
            // windows页面滑动到最底部

            $(document).ready(function() {
                // 获取浏览器窗口的高度
                var windowHeight = $(window).height();

                // 将页面下滑到最底部
                $('html, body').animate({
                    scrollTop: $(document).height() - windowHeight
                }, 1000); // 1000为动画的持续时间，以毫秒为单位
            });
        },
        error: function (xhr, status, error) { // 请求失败时的回调函数
            console.log("登录请求失败了：")
            console.log(error)
        }
    });
}
function chat(message, username) {
    $.ajax({
        url: 'http://localhost:8080/chat', // 请求的URL
        method: 'Post', // 请求方法（GET、POST等）
        dataType: 'json', // 期望的响应数据类型（json、html等）
        data: { // 请求参数
            username: username,
            q: message
        },
        success: function (response) { // 请求成功时的回调函数
            if (response.state == 0 && response.state !== null) {
                setTimeout(function () {


                }, 2000);
                $('.eye-ball').css({
                    'background-color': '#0cff00'
                });
            } else {
                alert("账号都登不上，不如去玩原神！")
                $('.eye-ball').css({
                    'background-color': '#FF0000'
                });
            }
        },
        error: function (xhr, status, error) { // 请求失败时的回调函数
            $('.eye-ball').css({
                'background-color': '#FF0000'
            });
            console.log("登录请求失败了：")
            console.log(error)
        }
    });
}